<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="format-detection" content="telephone=no">
    <title>有事求卦</title>
    <script> (function(designWidth, maxWidth) {
            var doc = document,
            win = window,
            docEl = doc.documentElement,
            remStyle = document.createElement("style"),
            tid;

            function refreshRem() {
                var width = docEl.getBoundingClientRect().width;
                maxWidth = maxWidth || 540;
                width>maxWidth && (width=maxWidth);
                var rem = width * 100 / designWidth;
                remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
            }

            if (docEl.firstElementChild) {
                docEl.firstElementChild.appendChild(remStyle);
            } else {
                var wrap = doc.createElement("div");
                wrap.appendChild(remStyle);
                doc.write(wrap.innerHTML);
                wrap = null;
            }
            //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
            refreshRem();

            win.addEventListener("resize", function() {
                clearTimeout(tid); //防止执行两次
                tid = setTimeout(refreshRem, 300);
            }, false);

            win.addEventListener("pageshow", function(e) {
                if (e.persisted) { // 浏览器后退的时候重新计算
                    clearTimeout(tid);
                    tid = setTimeout(refreshRem, 300);
                }
            }, false);

            if (doc.readyState === "complete") {
                doc.body.style.fontSize = "16px";
            } else {
                doc.addEventListener("DOMContentLoaded", function(e) {
                    doc.body.style.fontSize = "16px";
                }, false);
            }
        })(750, 750);</script>
    <!--[if lt IE 9]>  
        <script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
        <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>    
    <![endif]-->
    <style>
        *{
            margin:0;
            padding:0;
            -webkit-touch-callout:none;
            -moz-touch-callout:none;
            -ms-touch-callout:none;
            touch-callout:none;
        }
        .gua{
            width:100vw;
            height:100vh;
            background:url("__PUBLIC__/images/color2/v1/beijing.png") no-repeat;
            background-size: 100% 100%;
            position: relative;
        }
        .bg_guang{
            width:100%;
            height: 9.76rem;
            position: absolute;
            top:0.42rem;
            z-index: 2;
            transform: scale(0.8);
            animation: guang 2s infinite linear alternate;
        }
        .help{
            width:0.5rem;
            height:0.5rem;
            margin-right:0.2rem;
            display: inline-block;
            background:url("__PUBLIC__/images/color2/v2/01_gua_icon_help.png") no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top:1rem;
            right:0;
            z-index: 55;
            -webkit-tap-highlight-color: transparent;
        }
        .yue{
            width:0.5rem;height:0.5rem;
            position: absolute;
            right:0;
            top:0;
            margin:0.2rem 0.2rem 0 0;
            background:url("__PUBLIC__/images/color2/v2/02_qifu_quick01.png") no-repeat;
            background-size:100% 100%;
            -webkit-tap-highlight-color: transparent;
        }
        .gui_bg{
            width:90%;
            /* background: url("__PUBLIC__/images/color2/v2/02_ysyg_view2_godBg.png") no-repeat;
            background-size:100% 100%; */
            position: absolute;
            height:7rem;
            top:50%;
            left:50%;
            margin-left:-45%;
            margin-top:-3rem;
            display: flex;
            justify-content: center;
        }
        .tomoney{width:0.6rem;height:0.6rem;position: absolute;left:50%;margin-left:-0.3rem;z-index: 1;top:-1rem;}
        .money0{z-index: 2;}
        .gui{
            width:3.4rem;
            height:4rem;
            -webkit-tap-highlight-color: transparent;
            position: relative;
            z-index: 2;
            top:0.2rem;
            background:url("__PUBLIC__/images/color2/v2/02_ysyg_tortoise.png")no-repeat;
            background-size:100% 100%;
        }
        .num_box{
            position: absolute;
            top:1.18rem;left:50%;
            margin-left:-0.6rem;
            transition:2s;
            opacity: 0;
            font-size:0.48rem;
            color:#CDA150;
            font-weight: 700;
            display: flex;
            display: -webkit-flex;
        }
        .icon_money{
            display: inline-block;
            background:url("__PUBLIC__/images/color2/v2/02_zhengmian.png") no-repeat;
            width:0.6rem;
            height:0.6rem;
            background-size:100% 100%;
            vertical-align: middle; 
            margin-left:0.1rem;  
        }
        .gua_box{position: relative;}
        .linght{
            position: absolute;
            width:0.6rem;
            height:0.6rem;
            left:0.1rem;
            background:url("__PUBLIC__/images/color2/v2/02_ysyg_light.png") no-repeat;
            background-size:100% 100%;
            transform: scale(0);
        }
        .jiegua{
            width:2rem;
            height:0.7rem;
            display: none;
            text-decoration: none;
            border:none;
            position: absolute;
            top:50%;
            left:50%;
            transition: 2s;
            margin-left:-1rem;
            margin-top:-0.35rem;
            -webkit-tap-highlight-color: transparent;
            background:url("__PUBLIC__/images/color2/v2/gua_jiegua_default.png") no-repeat;
            background-size:100% 100%;
        }
        .end_gua{
            position: absolute;
            display: flex;
            width:100%;
            padding:0 0.6rem;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            justify-content: space-between;
            display: -webkit-flex;
            bottom:0.4rem;
            font-size:0.24rem;
            color:#dacda2;
        }
        .end_gua p{
            margin-bottom: 0.16rem;
            width:1.88rem;
            height:0.32rem;
            transition: 3s;
            white-space: nowrap;
            background:url("__PUBLIC__/images/color2/v2/wen.png") no-repeat;
            background-size: 100% 100%;
        }
        .end_gua p img{width:1.3rem;height:0.1rem;vertical-align: middle;margin-right:0.1rem;}
        .shangyao,.xiayao{padding-left:0.8rem;position: relative;}
        .shangyao::before{
            content:"上爻";
            position: absolute;
            left:0;
            font-size:0.32rem;
            color:#dacda2;
        }
        .xiayao::before{
            content:"下爻";
            position: absolute;
            left:0;
            font-size:0.32rem;
            color:#dacda2;
        }
        .tishi_bg{
            width:100%;
            height:100%;
            position: fixed;
            background-color:rgba(0,0,0,0.4);
            top:0;left:0;
            z-index: 99;
            display: none;
            background-image:url("__PUBLIC__/images/color2/v2/gua_shake_tip.png");
            background-repeat:no-repeat;
            background-size: 100% 70%;
        }
        @keyframes guang {
            to{transform: scale(1)}
        }
        @keyframes move1 {
            to{top:50%;}
        }
        @keyframes move2 {
            50%{margin-left:-0.5rem;}
            100%{margin-left:0.5rem;}
        }
        @keyframes move3 {
            0%{top:50%;}
            80%{left:36%;top:65%;opacity: 1;}
            100%{opacity: 0;left:36%;top:65%;}
        }
        @keyframes move4 {
            0%{top:50%}
            80%{left:50%;top:65%;opacity: 1;}
            100%{opacity: 0;left:50%;top:65%;}
        }
        @keyframes move5 {
            0%{top:50%}
            80%{left:64%;top:65%;opacity: 1;}
            100%{opacity: 0;left:64%;top:65%;}
        }
        @keyframes linght {
            to{transform: scale(1.5)}
        }
        @keyframes move_right{
            0%{transform: scale(0)}
            50%{transform: scale(1.1)}
            100%{transform: scale(1)}
        }
        /* 加载 */
        .spin_bg{
            position: fixed;
            top:0;
            left:0;
            width: 100%;
            height:100%;
            background: rgba(0,0,0,0.7);
            z-index: 99;
            overflow: hidden;
        }
        .spinner {
            margin: 50% auto;
            width: 1.8rem;
            height: 1.8rem;
            position: relative;
            text-align: center;
            -webkit-animation: rotate 2.0s infinite linear;
            animation: rotate 2.0s infinite linear;
        }
        
        .dot1, .dot2 {
            width: 60%;
            height: 60%;
            display: inline-block;
            position: absolute;
            top: 0;
            background-color:#dacda2;
            box-shadow: 0 0 0.8rem #01D1F1;
            border-radius: 100%;
            -webkit-animation: bounce 2.0s infinite ease-in-out;
            animation: bounce 2.0s infinite ease-in-out;
        }
        
        .dot2 {
            top: auto;
            bottom: 0px;
            -webkit-animation-delay: -1.0s;
            animation-delay: -1.0s;
        }
        
        @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}
        @keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}
        
        @-webkit-keyframes bounce {
        0%, 100% { -webkit-transform: scale(0.0) }
        50% { -webkit-transform: scale(1.0) }
        }
        
        @keyframes bounce {
        0%, 100% {
            transform: scale(0.0);
            -webkit-transform: scale(0.0);
        } 50% {
            transform: scale(1.0);
            -webkit-transform: scale(1.0);
        }
        }
        .img-title{
            width: 5.48rem;
            height: 0.8rem;
            background:url("__PUBLIC__/images/color2/v1/biaoti.png") no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: 1rem;
            left: 50%;
            margin-left: -2.74rem;
        }
    </style>
</head>
<body>
    <section class="gua">
        <div class="help"></div>
        <div class="yue"></div>
        <div class="bg_guang"><img src="__PUBLIC__/images/color2/v2/02_ysyg_tortoise_bg_new.png" width="100%" alt=""></div>
        <!-- 初始铜钱 -->
        <div class="tomoney money0">
            <img src="__PUBLIC__/images/color2/v2/02_zhengmian.png" width="100%" alt="">
        </div>
        <!-- 铜钱一 -->
        <div class="tomoney money1">
            <img src="__PUBLIC__/images/color2/v2/02_zhengmian.png" class="ro_img1" width="100%" alt="">
        </div>
        <!-- 铜钱二 -->
        <div class="tomoney money2">
            <img src="__PUBLIC__/images/color2/v2/02_zhengmian.png" class="ro_img2" width="100%" alt="">
        </div>
        <!-- 铜钱三 -->
        <div class="tomoney money3">
            <img src="__PUBLIC__/images/color2/v2/02_zhengmian.png" class="ro_img3" width="100%" alt="">
        </div>
        <!-- 龟壳 -->
        <div class="gui_bg">
            <div class="gui">
                <a href="javascript:;"  class="jiegua"></a>
            </div>
        </div>
        <div class="img-title"></div>
        <!-- 卦数量 -->
        <div class="num_box">
            <div class="gua_box"><span class="linght"></span><span class="gua_num">0</span>/6</div><span class="icon_money"></span>
        </div>

        <!-- 音乐 -->
        <audio autoplay loop="loop" id="music">
            <source src="__PUBLIC__/images/color2/v2/qft_music_2.mp3" type="audio/mpeg"/>
        </audio>
        <!-- 摇铜钱的声音 -->
        <audio  id="music1">
            <source src="__PUBLIC__/images/color2/v2/QG_music_yao.mp3" type="audio/mpeg"/>
        </audio>
        <!-- 铜钱掉落的声音 -->
        <audio  id="music2">
            <source src="__PUBLIC__/images/color2/v2/QG_moneyDiao.mp3" type="audio/mpeg"/>
        </audio>
        <!-- 卦像 -->
        <div class="end_gua">
            <div class="shangyao">
                <p class="gua01"></p>
                <p class="gua02"></p>
                <p class="gua03"></p>
            </div>
            <div class="xiayao">
                <p class="gua04"></p>
                <p class="gua05"></p>
                <p class="gua06"></p>
            </div>
            <form action="<!--{:U('DoubleColour/zhifu','',false)}-->" method="post" class="gua_form">
                <input type="hidden" name="xiayao01" id="guaxiang01" value="">
                <input type="hidden" name="xiayao02" id="guaxiang02" value="">
                <input type="hidden" name="xiayao03" id="guaxiang03" value="">
                <input type="hidden" name="shangyao01" id="guaxiang04" value="">
                <input type="hidden" name="shangyao02" id="guaxiang05" value="">
                <input type="hidden" name="shangyao03" id="guaxiang06" value="">
            </form>
        </div>
        <!-- 提示 -->
        <div class="tishi_bg"></div>
    </section>
    <!-- 加载 -->
    <div class="spin_bg">
        <div class="spinner">
            <div class="dot1"></div>
            <div class="dot2"></div>
        </div>
    </div>
    
    <script>
        var ogui = document.querySelector('.gui');
        var ogua_num = document.querySelector(".gua_num");
        var otomoney0 =document.querySelector(".money0");
        var otomoney1 =document.querySelector(".money1");
        var otomoney2 =document.querySelector(".money2");
        var otomoney3 =document.querySelector(".money3");
        // var onum_box =  document.querySelector(".num_box");
        var olinght = document.querySelector(".linght");
        var oyue = document.querySelector(".yue");
        var omusic = document.getElementById("music");
        var omusic1 = document.getElementById("music1");
        var omusic2 = document.getElementById("music2");
        var ojiegua = document.querySelector('.jiegua');
        var ospin_bg =document.querySelector(".spin_bg");
        var g_num = ogua_num.innerHTML;
        var count =new Number();
        var countList = [0,0,0,0,0,0]
        var isAutoplay = true;
        var isyaohuang = false;
        var ismoneyYao = true;

        // 提示
        document.querySelector(".tishi_bg").onclick= function(){
            this.style.display ="none";
        }
        document.querySelector(".help").onclick=()=>document.querySelector(".tishi_bg").style.display = "block";
        //随机卦相
        function random(){
            var random = Math.round(Math.random());
            var data = new Array();
            if(random == 0){
                data[0] = '__PUBLIC__/images/color2/v2/02_zhengmian.png';  //正面
                data[1] = '1';
            }else if(random == 1){
                data[0] = '__PUBLIC__/images/color2/v2/02_fanmian.png';  //反面
                data[1] = '2';
            }
            return data;
        }
        // 解决移动端不能自动播放
        document.addEventListener('touchstart', function () {
            if(isAutoplay){
                omusic.play();
                omusic1.load();
                omusic2.load();
                isAutoplay = false;
            }
        });
        // 音乐开关
        oyue.onclick = function(){
            if(omusic.paused){
                omusic.play();
                oyue.style.backgroundImage ="url(__PUBLIC__/images/color2/v2/02_qifu_quick01.png)"
            }else{
                omusic.pause();
                oyue.style.backgroundImage ="url(__PUBLIC__/images/color2/v2/02_qifu_quick02.png)"
            }
        }
        // 
        // ospin_bg.onclick = ()=> {
        //     ospin_bg.style.display = "none"
        //     if(ospin_bg.style.display == "none"){
        //         otomoney0.style.animation = "move1 3 1s forwards";
        //     }
        // }
        // 页面加载执行钱币掉落
        window.onload = function(){//加载资源完成
            ospin_bg.style.display = "none"
            if(ospin_bg.style.display == "none"){
                otomoney0.style.animation = "move1 3 1s forwards";
            }
        }

        // 掉落钱币后点击龟壳触发
        otomoney0.addEventListener("webkitAnimationEnd", function(){
            ogui.onclick = function(){
                if(g_num < 6){
                    ogui.style.animation = "move2 200ms 4 linear";
                    if(ismoneyYao){
                        omusic1.play();
                    }
                }
            }
        }, false); 

        // 摇晃手机触发
        var shakeThreshold = 1000; // 定义一个摇动的阈值
        var lastUpdate = 0; // 记录上一次摇动的时间
        var x, y, z, lastX, lastY, lastZ; // 定义x、y、z记录三个轴的数据以及上一次触发的数据

        // 监听传感器运动事件
        if (window.DeviceMotionEvent) {
            window.addEventListener('devicemotion', deviceMotionHandler, false);
        } else {
            alert('本设备不支持devicemotion事件');
        }
        // 运动传感器处理
        function deviceMotionHandler(eventData) {
            var acceleration = eventData.accelerationIncludingGravity; // 获取含重力的加速度
            var curTime = new Date().getTime();

            // 100毫秒进行一次位置判断
            if ((curTime - lastUpdate) > 100) {

                var diffTime = curTime - lastUpdate;
                lastUpdate = curTime;

                x = acceleration.x;
                y = acceleration.y;
                z = acceleration.z;

                var speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000;
                // 前后x, y, z间的差值的绝对值和时间比率超过了预设的阈值，则判断设备进行了摇晃操作
                if (speed > shakeThreshold) {
                    if(g_num < 6){
                        ogui.style.animation = "move2 200ms 4 linear"
                        if(ismoneyYao){
                            omusic1.play();
                        } 
                    }
                }
                lastX = x;
                lastY = y;
                lastZ = z;
            }
        }
        
        // 龟壳动画结束触发
        ogui.addEventListener("webkitAnimationEnd", function(){
            ismoneyYao = false;
            omusic1.pause();
            omusic2.play();
            var img01 = random();
            var img02 = random();
            var img03 = random();
            document.querySelector(".ro_img1").src = img01[0]
            document.querySelector(".ro_img2").src = img02[0]
            document.querySelector(".ro_img3").src = img03[0]
            count = parseInt(img01[1]) + parseInt(img02[1]) + parseInt(img03[1]);
            countList = countList.map(val=>{
                return parseInt(random()[1]) + parseInt(random()[1]) + parseInt(random()[1])
            })
            console.log('countList')
            console.log(countList)
            otomoney1.style.animation ="move3 3s forwards";
            otomoney2.style.animation ="move4 3s forwards";
            otomoney3.style.animation ="move5 3s forwards";
            // onum_box.style.opacity = "1";  
            olinght.style.animation = null;
        },false);

        // 初始化动画 保存数据
        otomoney1.addEventListener("webkitAnimationEnd", function(){
            g_num=6;
            omusic1.load();
            omusic2.load();
            ismoneyYao = true;
            ogui.style.animation = null;
            otomoney1.style.animation = null;
            otomoney2.style.animation = null;
            otomoney3.style.animation = null;
            ogua_num.innerHTML=g_num;
            olinght.style.animation = "linght 500ms linear"
            var ogua01 = document.querySelector('.gua01');
            var ogua02 = document.querySelector('.gua02');
            var ogua03 = document.querySelector('.gua03');
            var ogua04 = document.querySelector('.gua04');
            var ogua05 = document.querySelector('.gua05');
            var ogua06 = document.querySelector('.gua06');
            var oinput01 = document.getElementById("guaxiang01");
            var oinput02 = document.getElementById("guaxiang02");
            var oinput03 = document.getElementById("guaxiang03");
            var oinput04 = document.getElementById("guaxiang04");
            var oinput05 = document.getElementById("guaxiang05");
            var oinput06 = document.getElementById("guaxiang06");

            
            function getIf(count,oparent,oinput){
                var oImg = document.createElement("img")
                var ospan =document.createElement("span");
                if(count == 4){
                    //ths.text('一个反面两个正面');
                    oinput.value = 1;
                    ospan.innerHTML="少阳";
                    oImg.src = "__PUBLIC__/images/color2/v2/02_shaoyang.png";
                    oparent.style.background = "none";
                    oparent.appendChild(oImg);
                    oparent.appendChild(ospan);
                    oparent.style.animation = "move_right 1s forwards"
                }else if(count == 5){
                    //ths.text('两个反面一个正面');
                    oinput.value = 2;
                    ospan.innerHTML="少阴";
                    oImg.src = "__PUBLIC__/images/color2/v2/02_shaoyin.png";
                    oparent.style.background = "none";
                    oparent.appendChild(oImg);
                    oparent.appendChild(ospan);
                    oparent.style.animation = "move_right 1s forwards"
                }else if(count == 6){
                    //ths.text('三个反面');
                    oinput.value = 4;
                    ospan.innerHTML="老阴";
                    oImg.src = "__PUBLIC__/images/color2/v2/02_laoyin.png";
                    oparent.style.background = "none";
                    oparent.appendChild(oImg);
                    oparent.appendChild(ospan);
                    oparent.style.animation = "move_right 1s forwards"
                }else if(count == 3){
                    //ths.text('三个正面');
                    oinput.value = 3;
                    ospan.innerHTML="老阳";
                    oImg.src = "__PUBLIC__/images/color2/v2/02_laoyang.png";
                    oparent.style.background = "none";
                    oparent.appendChild(oImg);
                    oparent.appendChild(ospan);
                    oparent.style.animation = "move_right 1s forwards"
                }
            }
        
            // if(g_num == 1){
                getIf(countList[0],ogua06,oinput01)
            // }else if(g_num == 2){
                getIf(countList[1],ogua05,oinput02)
            // }else if(g_num == 3){
                getIf(countList[2],ogua04,oinput03)
            // }else if(g_num == 4){
                getIf(countList[3],ogua03,oinput04)
            // }else if(g_num == 5){
                getIf(countList[4],ogua02,oinput05)
            // }else if(g_num == 6){
                getIf(countList[5],ogua01,oinput06)
                ojiegua.style.display = "block";
            // }


            console.log('oinput.value')
            console.log(oinput01.value)
            console.log(oinput02.value)
            console.log(oinput03.value)
            console.log(oinput04.value)
            console.log(oinput05.value)
            console.log(oinput06.value)
        }, false); 
        
        ojiegua.addEventListener("touchstart", function(){ 
            this.style.backgroundImage= "url('__PUBLIC__/images/color2/v2/gua_jiegua_pressed.png')";
        })
        ojiegua.addEventListener("touchend", function(){ 
            this.style.backgroundImage= "url('__PUBLIC__/images/color2/v2/gua_jiegua_default.png')";
            
            document.querySelector(".gua_form").submit();
        })
        sessionStorage.setItem("chufa", "2");
    </script>
</body>
</html>